import { Component, OnInit, ElementRef, ContentChild, ContentChildren, AfterViewInit, QueryList } from '@angular/core';
import { ContentPanelComponent } from './panel/panel.component';

@Component({
  selector: 'app-content-child',
  templateUrl: './content-child.component.html'
})
export class ContentChildComponent implements OnInit, AfterViewInit {
  @ContentChild('list', { static: true }) private listEle: ElementRef;
  @ContentChild('span', { static: true }) private spanEle: ElementRef;
  @ContentChildren('list') private eleList: QueryList<ElementRef>;
  @ContentChild(ContentPanelComponent, { static: true }) private contentPanInstance: ContentPanelComponent;
  @ContentChildren(ContentPanelComponent) private contentPanInstances: QueryList<ContentPanelComponent>;
  @ContentChildren(ContentPanelComponent, { descendants: true }) private contentPanInstanceList: QueryList<ContentPanelComponent>;
  constructor() { }

  ngOnInit() {
  }
  ngAfterViewInit(): void {
   console.log('list:', this.listEle);
   console.log('span:', this.spanEle);
   console.log('lists:', this.eleList);
   console.log('contentPanInstance:', this.contentPanInstance.el.nativeElement.firstChild);
   console.log('contentPanInstances:', this.contentPanInstances);
   console.log('contentPanInstanceList:', this.contentPanInstanceList);
  }
}
